<template>
  <view>
    <view class="my-serach-containe">
      <my-search @click="goToSerach"></my-search>
    </view>
    <view class="guntou" >
      <!-- 左侧滚动视图区 -->
     
      <scroll-view class="gunzuo" scroll-y :style="{height: wh +'px'}" >
        <block v-for="(item,i) in fenList" key="i">
        <view :class="['zuoti',i===msuoyin?'Z':'']" @click="ZChanged(i)">{{item.cat_name}}</view>
        </block>
      </scroll-view>
      <!-- 右侧滚动视图区 -->
      <scroll-view class="gunyou" scroll-y:style="{height: wh +'px'}" :scroll-top="scrollTop">
        <view class="youti" v-for="(item2,i2) in fenList2" :key="i2">
          <view class="youti-title">{{item2.cat_name}}</view>
          <!-- 动态渲染三级分类列表数据 -->
          <view class="youti-lv3-list">
            <!-- 三级分类item项 -->
            <view class="youti-lv3-item" v-for="(item3,i3) in item2.children" :key="i3" @click="gotuGoodsList(item3)">
              <image :src="item3.cat_icon"></image>
              <text>{{item3.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    
  </view>
</template>

<script>
  import badgeMix from '@/mixins/tabbar-badge.js'
  export default {
    mixins: [badgeMix],
    data() {
      return {
        //窗口的可用高度=屏幕高度-navigationBa高度-tabBar高度
        wh:0,
        //分类数据列表
        fenList:[],
        //默认选中项索引
        msuoyin:0,
        //二级分类列表
        fenList2:[],
        //滚动条距离顶部距离
        scrollTop:0
      }
    },
    onLoad() {
      //获取当前系统信息
      const sysInfo=uni.getSystemInfoSync()
      //为wh窗口可以高度动态赋值
      this.wh=sysInfo.windowHeight-50
      //调用获取分类列表数据的方法
      this.getFenList()
    },
    methods:{
      async getFenList(){
          // 发起请求
          const { data: res } = await uni.$http.get('/api/public/v1/categories')
          // 判断是否获取失败
          if (res.meta.status !== 200) return uni.$showMsg()
          // 转存数据
          this.fenList = res.message
          this.fenList2=res.message[0].children
        },
        //选中项改变的事件处理函数
        ZChanged(i){
          this.msuoyin=i
          //为二级分类重新赋值
          this.fenList2=this.fenList[i].children
          //让scrollTop的值在0或1之间切换
          this.scrollTop = this.scrollTop === 0 ? 1 : 0
        },
        //点击三级分类跳转商品列表页面
        gotuGoodsList(item3){
          uni.navigateTo({
            url:'/subpkg/goods_list/goods_list?cid='+item3.cat_id
          })
        },
        goToSerach(){
          uni.navigateTo({
            url:'/subpkg/search/search'
          })
        }
      }
  }
</script>

<style lang="scss">
  .my-serach-containe{
    //设置定位效果为“吸顶”
    position: sticky;
    //吸顶位置
    top: 0;
    //提高层级，防止被覆盖
    z-index: 999;
  }
.guntou{
  display: flex;
  .gunzuo{
    width: 120px;
    .zuoti{
      line-height: 60px;
      background-color: #f7f7f7;
      text-align: center;
      font-size: 12px;
      
      //激活项样式
      &.Z{
        background-color: #ffffff;
        position: relative;
        //激活项左侧红色指示线
        &::before{
          content: '';
          display: block;
          width: 3px;
          height: 30px;
          background-color: #c00000;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translatey(-50%);
        }
      }
    }
  }
.youti-title{
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 150x 0;
}
.youti-lv3-list{
     display: flex;
     flex-wrap: wrap;
     .youti-lv3-item{
        width: 33.33%;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
          image {
             width: 60px;
             height: 60px;
           }
       
           text {
             font-size: 12px;
           }

     }

  }
}

</style>
